<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借阅列表</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">

    <h3>欢迎你：{{user.username}}，你的角色是：{{user.role}}</h3>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="bname"
                label="书名">
        </el-table-column>
        <el-table-column
                prop="uname"
                label="用户名">
        </el-table-column>
        <el-table-column
                label="借阅时间">
            <template slot-scope="scope">
                {{scope.row.readTime|format("yyyy-MM-dd hh:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column
                label="归还时间">
            <template slot-scope="scope">
                <span v-if="scope.row.backTime!=null">{{scope.row.backTime|format("yyyy-MM-dd hh:mm:ss")}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button v-if="user.role=='管理员'&&scope.row.backTime==null"  size="mini" @click="cuiBackBook(scope.row.id)">催还</el-button>
                <el-button v-if="user.role=='普通用户'&&scope.row.backTime==null" size="mini" @click="backBook(scope.row.id)">归还</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{},
            tableData:[],
            total:0,
            query:{
                page:1,
                pageSize:2,
                uid:""
            }

        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            backBook(id){
                axios.post(`/read-list/backBook?id=${id}`).then(res=>{
                    this.$message.success("归还成功")
                    this.initData()
                })

            },
            cuiBackBook(id){
                axios.post(`/read-list/cuiBackBook?id=${id}`).then(res=>{
                    this.$message.success("崔还成功")
                })
            },
            handleSizeChange(val) {
                this.query.pageSize =val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                axios.post(`/read-list/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--

                    }
                })

            }

        },
        created(){



            var userStr = localStorage.getItem("user_tushu_06");

            this.user = JSON.parse(userStr);

            if(this.user.role=="普通用户"){
                this.query.uid = this.user.id;
            }
            this.initData()
        }
    })
</script>


</body>
</html>
